<template>
  <a-layout class="layout">
    <a-layout-header>
      <div class="logo"/>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
        <a-menu-item key="1" @click="goIndex">首页</a-menu-item>
        <a-menu-item key="2" @click="goArticles">博文</a-menu-item>
        <a-menu-item key="3" @click="goBaidu">百度</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout-content style="padding: 0 50px">
      <div class="indexJpg">

      </div>


    </a-layout-content>


    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>


<script>
import router from "../router/index.js";
import {GetPosts, GetArticle} from "../utils/article.js";
import {ref} from "vue";

export default {


  setup() {
    const selectedKeys = ref(['1'])
    return {
      selectedKeys,
    };
  },

  methods: {
    goIndex() {
      console.log('goIndex')
      router.push("/")
    },
    goArticles() {
      console.log('goArticles')
      console.log(router)
      router.push("/article")
    },
    goBaidu() {
      console.log('goBaidu')
      router.push("/baidu")
    }
  }
};
</script>

<style>
.indexJpg {
  margin: 0 auto;
  width: 100%;
  height: 800px;
  font-size: 28px;
  color: tomato;
  text-align: center;
  background: url("src/index.jpg");
  background-size: 100% 100%;
  border: 1px solid;
}
</style>
